﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
    CodeBehind="DataBindTemplate.aspx.cs" Inherits="ControlExplorer.C1Menu.DataBindTemplate" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Menu"
    TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <wijmo:C1Menu runat="server" ID="C1Menu" DataSourceID="XmlDataSource1">
        <HideAnimation>
            <Animated Effect="fade"></Animated>
        </HideAnimation>
        <DataBindings>
            <wijmo:C1MenuItemBinding TextField="Text" HeaderField="header" SeparatorField="Separator" />
        </DataBindings>
        <TopItemsTemplate>
            <a>
                <%#DataBinder.Eval(Container.DataItem,"Text")%></a>
        </TopItemsTemplate>
        <ChildItemsTemplate>
			<div>
			<a class="wijmo-wijmenu-text"><%#DataBinder.Eval(Container.DataItem,"Text")%></a>
			</div>
        </ChildItemsTemplate>
    </wijmo:C1Menu>
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/menu_structure.xml"
        XPath="/root/menuitem"></asp:XmlDataSource>

<script id="scriptInit" type="text/javascript">
	$(document).ready(function () {
		$(".wijmo-wijmenu-text").parent().bind("click", function () {
			$("#<%= C1Menu.ClientID %>").c1menu("hideAllMenus");
		});
		$(".wijmo-wijmenu-link").hover(function () {
			$(this).addClass("ui-state-hover");
		}, function () {
			$(this).removeClass("ui-state-hover");
		})
	});

</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
<p>
本实例展示了怎样把 <strong>C1Menu </strong>绑定到一个数据源并且用不同的模板展示菜单项。
</p>
<p>此示例中使用的属性：</p>
<ul>
<li>DataBindings</li>
<li>TopItemsTemplate</li>
<li>ChildItemsTemplate</li>
</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
